<div>
  <div class="searchItem">
    <label>用户：</label>
    <input nz-input placeholder="请输入用户ID/手机号" [(ngModel)]="query.user"/>
  </div>
  <div class="searchItem">
    <label>中奖场次：</label>
    <nz-select [(ngModel)]="query.prizeGroupType" nzMode="multiple"
               [nzMaxTagCount]="1" nzAllowClear nzPlaceHolder="请选择" [nzBackdrop]="true">
      <nz-option [nzValue]="1" nzLabel="初级场"></nz-option>
      <nz-option [nzValue]="2" nzLabel="中级场"></nz-option>
      <nz-option [nzValue]="3" nzLabel="高级场"></nz-option>
    </nz-select>
  </div>
  <div class="searchItem">
    <label>状态：</label>
    <nz-select [(ngModel)]="query.state" nzMode="multiple"
               [nzMaxTagCount]="1" nzAllowClear nzPlaceHolder="请选择" [nzBackdrop]="true">
      <nz-option [nzValue]="0" nzLabel="待发放"></nz-option>
      <nz-option [nzValue]="1" nzLabel="已发放"></nz-option>
      <nz-option [nzValue]="2" nzLabel="已完成"></nz-option>
      <nz-option [nzValue]="3" nzLabel="已失效"></nz-option>
    </nz-select>
  </div>
  <div class="searchItem">
    <label>中奖时间：</label>
    <nz-range-picker nzFormat="yyyy-MM-dd" [(ngModel)]="query.time"></nz-range-picker>
  </div>
  <div class="searchItem">
    <label>发放时间：</label>
    <nz-range-picker nzFormat="yyyy-MM-dd" [(ngModel)]="query.grantTime"></nz-range-picker>
  </div>
  <div class="searchItem">
    <button nz-button nzType="primary" (click)="queryBtn()">查询</button>
    <button nz-button nzType="default" (click)="resetCondition()">重置</button>
  </div>
  <div>
    <div class="searchItem">
      <button nz-button nzType="primary" (click)="export()">导出</button>
    </div>
  </div>
</div>

<!--表格-->
<nz-table
  #table
  nzSize="small"
  nzShowSizeChanger
  nzShowQuickJumper
  nzOuterBordered
  [nzData]="tableData.records"
  [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
  [nzTotal]="tableData.total"
  [(nzPageIndex)]="query.page"
  [(nzPageSize)]="query.pageSize"
  [nzFrontPagination]="false"
  [nzShowTotal]="totalTemplate"
  (nzPageIndexChange)="onPageIndexChange($event)"
  (nzPageSizeChange)="onPageSizeChange($event)"
>
  <thead>
  <tr>
    <!--    <th nzWidth="100px" [nzChecked]="tableData.checked"-->
    <!--        [nzIndeterminate]="tableData.indeterminate" (nzCheckedChange)="onAllCheckedWaitCheck($event)"-->
    <!--        nzLeft></th>-->
    <th nzAlign="center">用户ID</th>
    <th nzAlign="center">用户手机号</th>
    <th nzAlign="center">奖品名称</th>
    <th nzAlign="center">奖品价值</th>
    <th nzAlign="center">奖品图片</th>
    <th nzAlign="center">中奖时间</th>
    <th nzAlign="center">中奖场次</th>
    <th nzAlign="center">状态</th>
    <th nzAlign="center">发放时间</th>
    <th nzAlign="center" nzWidth="160px">操作</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let data of table.data">
    <!--    <td [nzChecked]="tableData.setOfCheckedId.has(data['id'])"-->
    <!--        (nzCheckedChange)="onItemChecked(data['id'], $event)" nzLeft></td>-->
    <td nzAlign="center">{{ data['userId'] }}</td>
    <td nzAlign="center">{{ data['userPhone'] }}</td>
    <td nzAlign="center">{{ data['prizeName'] }}</td>
    <td nzAlign="center">{{ data['prizeValue'] }}</td>
    <td nzAlign="center">
      <img
        nz-image
        width="60px"
        height="60px"
        [nzSrc]="data['prizeImg']"
      />
    </td>
    <td nzAlign="center">{{ data['createTime'] }}</td>
    <td nzAlign="center">{{ PRIZEGROUPTYPE[data['prizeGroupType']] }}</td>
    <td nzAlign="center">{{ STATE[data['status']] }}</td>
    <td nzAlign="center">{{ data['grantTime'] }}</td>
    <td nzAlign="center">
      <a *ngIf="data['status']===0&&data['prizeType']===3" (click)="showEdit(data)">发放奖品</a>
      <a *ngIf="data['status']===1&&data['prizeType']===3" (click)="showEdit(data)">编辑</a>
      <span *ngIf="data['prizeType'] !== 3">-</span>
    </td>
  </tr>
  </tbody>

  <!-- 分页template -->
  <ng-template #totalTemplate let-total>共有 {{ total }} 条</ng-template>
</nz-table>

<nz-modal
  [(nzVisible)]="expressModal.visible"
  nzTitle="编辑奖品"
  (nzOnCancel)="hideExpressModal()">
  <div *nzModalContent>
    <div class="rowItem">
      <label class="label" style="vertical-align: top">收货地址</label>
      <span style="display: inline-block;width: 300px">
        {{expressModal.address}}
        <app-button-copy [text]="expressModal.address"></app-button-copy>
      </span>
    </div>
    <div class="rowItem">
      <label class="label"><span>*</span>物流公司</label>
      <nz-select [(ngModel)]="expressModal.expressCode" nzPlaceHolder="请选择物流公司"
                 [nzBackdrop]="true"
                 nzAllowClear
                 nzShowSearch>
        <nz-option [nzValue]="l.content" [nzLabel]="l.name" *ngFor="let l of logistics"></nz-option>
      </nz-select>
    </div>
    <div class="rowItem">
      <label class="label"><span>*</span>物流单号</label>
      <input nz-input placeholder="请输入物流单号" [(ngModel)]="expressModal.expressNum"/>
    </div>
  </div>
  <div *nzModalFooter>
    <button nz-button nzType="default" (click)="hideExpressModal()">取消</button>
    <button nz-button nzType="primary" (click)="saveExpressModal()">确认</button>
  </div>
</nz-modal>
